<template>
	<view class="publishedCase row">
		<van-cell-group>
			<van-cell
				class="allBackground"
				label="基本信息"
				label-class="title"
				readonly
			/>
		  <van-field
				label="姓名"
				clearable
				required
				input-align="right"
		    placeholder="请输入姓名"
				@input="setInputValue('name', $event)"
		  />
			<van-field
				label="手机号码"
				clearable
				required
				type='number'
				maxlength="11"
			  placeholder="请输入手机号码"
				input-align="right"
				@input="setInputValue('phone', $event)"
			/>
			<van-field
				label="性别"
				clearable
				required
				readonly
			  placeholder="请选择性别"
			  :value="dataValue.sex"
				input-align="right"
				@click.native="showPop('sexList', 'name')"
			/>
			<van-field
				label="居住城市"
				clearable
				required
				readonly
			  placeholder="请选择居住地址"
			  :value="dataValue.address"
				input-align="right"
				@click.native="showPop('areaList', 'areaList', 'area')"
			/>
		</van-cell-group>
		<van-cell-group>
			<van-cell
				class="allBackground"
				label="相关情况"
				readonly
			/>
			<van-field
				label="康复疾病"
				clearable
				required
			  placeholder="请输入康复疾病"
				input-align="right"
				@input="setInputValue('diseaseName', $event)"
			/>
<!-- 			<van-field 
				label="康复疾病"
				clearable
				required
				readonly
				placeholder="请选择康复疾病类型"
				:value="dataValue.diseaseName"
				input-align="right"
				@click.native="showPop('diseaseList', 'name')"
			/> -->
			<!-- <van-field
				label="康复时间"
				clearable
				readonly
				required
				placeholder="请选择康复时间"
				:value="dataValue.recoveryDay"
				input-align="right"
				@click.native="showPop('recoveryDay', 'time', 'timePicker')"
			/>
			<van-field
				label="诊断机构及医生"
				title-width="240rpx"
				clearable
				required
				placeholder="请输入诊断机构及医生"
				:value="dataValue.diagnostic"
				input-align="right"
				@input="setInputValue('diagnostic', $event)"
			/>
			<van-field
				label="治疗时长(天)"
				title-width="240rpx"
				clearable
				required
				placeholder="请输入治疗时长"
				:value="dataValue.duration"
				input-align="right"
				@input="setInputValue('duration', $event)"
			/> -->
			<van-field
				label="康复后是否复发"
				title-width="240rpx"
				clearable
				readonly
				required
				placeholder="请选择康复后是否复发"
				:value="dataValue.relapseName"
				input-align="right"
				@click.native="showPop('relapseList', 'name')"
			/>
			<!-- <van-field
				clearable
				required
				readonly
				label="主题图片"
				class="column"
			>
				<template slot="button" class="upLoadOn">
					<view class="upLoadTitle"></view>
					<van-uploader class="cccc" name="imgThemeFiles" :max-count="1" :file-list="upLoad.imgThemeFiles" :after-read="afterRead" @delete="deleteFile">
						<van-button>
							<van-icon name="plus" style="color:#47A49B;" />
						</van-button>
					</van-uploader>
				</template>
			</van-field> -->
			<van-field
				:value="dataValue.cureProcess"
				title-width="240rpx"
				label="治疗手段及方法"
				type="textarea"
				required
				placeholder="请详细描述，以便了解情况"
				class="column textarea"
				:autosize=" { minHeight: '60px' }"
				:border="false"
				@blur="blur('cureProcess', $event)"
			/>
			<van-field
				clearable
				readonly
				class="upLoad"
			>
				<template slot="button" class="upLoadOn">
					<view class="upLoadTitle">附件</view>
					<van-uploader class="cccc" name="addCureProcessFiles" :file-list="upLoad.addCureProcessFiles" :after-read="afterRead" @delete="deleteFile">
						<van-button>
							<van-icon name="plus" style="color:#47A49B;" />
						</van-button>
					</van-uploader>
				</template>
			</van-field>
		</van-cell-group>
		
		<van-cell-group>
			<van-cell
				class="allBackground"
				label="专业康复检察 (附体检报告)"
				readonly
			/>
			<van-field
				:value="dataValue.diseaseDesc"
				title-width="600rpx"
				label="康复前后身体情况描述(照片、X光、CT片)"
				type="textarea"
				placeholder="请详细描述，以便了解情况"
				class="column textarea"
				:autosize=" { minHeight: '60px' }"
				maxlength="2000"
				:border="false"
				@blur="blur('diseaseDesc', $event)"
			/>
			<van-field
				clearable
				readonly
				class="upLoad"
			>
				<template slot="button" class="upLoadOn">
					<view class="upLoadTitle">附件</view>
					<van-uploader name="addDiseaseDescFiles" :file-list="upLoad.addDiseaseDescFiles" :after-read="afterRead" @delete="deleteFile">
						<van-button>
							<van-icon name="plus" style="color:#47A49B;" />
						</van-button>
					</van-uploader>
				</template>
			</van-field>
			<van-field
				:value="dataValue.medicalHistory"
				title-width="480rpx"
				label="以往病史"
				type="textarea"
				placeholder="请详细描述，以便了解情况"
				class="column textarea"
				:autosize=" { minHeight: '60px' }"
				maxlength="2000"
				:border="false"
				@blur="blur('medicalHistory', $event)"
			/>
			<van-field
				clearable
				readonly
				class="upLoad"
			>
				<template slot="button" class="upLoadOn">
					<view class="upLoadTitle">附件</view>
					<van-uploader name="addMedicalHistoryFiles" :file-list="upLoad.addMedicalHistoryFiles" :after-read="afterRead" @delete="deleteFile">
						<van-button>
							<van-icon name="plus" style="color:#47A49B;" />
						</van-button>
					</van-uploader>
				</template>
			</van-field>
		</van-cell-group>
		
		<view class="signatureBox">
			<view class="signature row" :class="showPicker || isDialogShow?'canHidden':''">
				<van-cell title="本人签名" title-width="120rpx" value="仔细阅读知情同意书后签名" required readonly :border="false" />
				<sign v-if="!dataValue.signImg" @success="success" @close="signClose"></sign>
				<view v-else class="signImgs">
					<image class="images" :src="dataValue.signImg" mode=""></image>
					<van-icon class="closeSignimg" @click="delSignImg" name="close" />
				</view>
			</view>
		</view>
		
		<view class="signCheckbox">
			<van-checkbox :value="checked" checked-color="#02BF88" @change="onChange">
				<text>康复案例分享</text>
				<text @click.stop="protocols" style="color: #02BF88;">知情同意书</text>
			</van-checkbox>
		</view>
		<van-popup :show="showPicker" position="bottom">
			<van-picker
				v-if="pickerType === 'picker'"
				show-toolbar
				:value-key="valueType"
				:columns="columnList"
				@confirm="onConfirm"
				@cancel="showPicker = false"
			/>
			<van-datetime-picker
				v-if="pickerType === 'timePicker'"
				type="date"
				title="选择年月日"
				:value="new Date().getTime()"
				@confirm="onConfirm"
				@cancel="showPicker = false"
			/>
			<van-area
				v-if="pickerType === 'area'"
			  :area-list=" areaList "
			  :columns-placeholder=" ['请选择', '请选择', '请选择'] "
			  title="省市区"
				@confirm="onConfirm"
				@cancel="showPicker = false"
			/>
		</van-popup>
		<view class="btnBox">
			<van-button class="btn" round type="primary" @click="submit">提交</van-button>
		</view>
		<van-toast id='van-toast'/>
		<van-dialog
		  use-slot
		  title="康复案例分享知情同意书"
		  :show="isDialogShow"
			confirm-button-color="#02BF88"
		  @confirm="isDialogShow = false"
		>
		<protocol></protocol>
		</van-dialog>
	</view>
</template>

<script>
	import {areaList}  from '@/utils/city';
	import { FormatTime } from "@/utils/index";
	import { formValidation } from '@/utils/regexp'
	import { uploadFile } from '@/utils/uploadFile'
	import { rehabilitationAdd } from '@/api/addEdit'
	import { deleteFile } from '@/api/common'
	import sign from '@/components/sign'
	import protocol from './protocol.vue'
	let upLoad = {
		addCureProcessFiles: [], //治疗手段及方法
		addDiseaseDescFiles: [], //治疗前
		addMedicalHistoryFiles: [], //以往病史
		imgThemeFiles: []
	}
	export default {
		name: 'publishedCase',
		components: { sign, protocol },
		data() {
			return {
				chooseType: '', // 当前选择的值
				pickerType: 'picker', // 当前选择的类型
				valueType: '',
				columnList: [], //当前选中的列表数据
				areaList: areaList, //省市区数据
				showPicker: false,
				checked: false,
				isDialogShow: false,
				//附件总集
				upLoad: upLoad,
				dataValue: {
					cureProcess: '',
					diseaseDesc: '',
					situation: '',
					medicalHistory: '',
					status: 1,
					autograph: '',
					imgTheme: ''
				},
				// 必填
				rules:{
					name: [
						{ required: true, message: '请填写姓名' }
					],
					phone:[
						{ required: true, message:'请填写手机号' },
						{ validate: /^1\d{10}$/, message:'手机号不正确' }
					],
					sex:[
						{ required: true, message:'请选择性别' }
					],
					address: [
						{ required: true, message:'请选择居住地址' }
					],
					diseaseName: [
						{ required: true, message: '请输入疾病类型' } 
					],
					// recoveryDay: [
					// 	{ required: true, message:'请选择康复时间' }
					// ],
					// diagnostic: [
					// 	{ required: true, message:'请输入诊断机构及医生' }
					// ],
					// duration: [
					// 	{ required: true, message: '请输入治疗时长' } 
					// ],
					relapseName: [
						{ required: true, message: '请选择是否康复' }
					],
					cureProcess: [
						{ required: true, message: '请输入治疗手段及方法' }
					]
				},
				sexList: [
					{
						id: '1',
						name: '男'
					},
					{
						id: '2',
						name: '女'
					},
					{
						id: '0',
						name: '保密'
					}
				],
				relapseList: [
					{
						id: '1',
						name:'是'
					},
					{
						id: '0',
						name:'否'
					}
					
				]
			}
		},
		computed: {
			diseaseList() {
				return this.$storage.getItem('diseaseList')
			}
		},
		onLoad(option) {
			// this.dataValue.diseaseId = option.diseaseId;
		},
		mounted() {},
		methods: {
			blur(e,s) {
				this.dataValue[e] = s.detail.value;
			},
			setInputValue(e,s){
				this.dataValue[e] = s.detail;
			},
			showPop(val, valueType , type='picker') {
				this.showPicker = true;
				this.columnList = this[val];
				this.chooseType = val;
				this.pickerType = type
				this.valueType = valueType
			},
			// 复选框
			onChange(event) {
				this.checked = event.detail
			},
			onConfirm(e) {
				const val = e.detail.value
				const vals = e.detail.values
				switch (this.chooseType) {
					case 'sexList':
						this.dataValue.sex = val.name
						this.dataValue.gender = val.id
						break;
					case 'areaList':
						let name = "";
						let id = "";
						vals.forEach(item => {
							if (name) {
								name += '-' + item.name
								id += ',' + item.code
							} else {
								name = item.name
								id = item.code
							}
						})
						this.dataValue.address = name
						this.dataValue.areaCode = id
						break;
					case 'diseaseList':
						this.dataValue.diseaseName = val.name
						// this.dataValue.diseaseId = val.id
						this.dataValue.imgTheme = val.imgTheme
						break;
					case 'recoveryDay':
						this.dataValue.recoveryDay = FormatTime(new Date(e.detail), "YYYY-MM-DD")
						break;
					case 'relapseList':
						this.dataValue.relapseName = val.name
						this.dataValue.isRecurs = val.id
						break;
					default:
						break;
				}
				this.showPicker = false;
			},
			afterRead:(file,val) => {
				let that = this;
				let type = val.name;
				 uploadFile({
					fileURL:'/file/uploadImage',
					filePath: file.path
				 }).then(res => {
					 upLoad[type].push({ url:res.file.accessUrl,id:res.file.fileId })
				 })
			},
			deleteFile(e) {
				let obj = this.upLoad[e.detail.name][e.detail.index]
				this.upLoad[e.detail.name].splice([e.detail.index],1)
				this.$nextTick(() =>{
					deleteFile({ fileId: obj.id })
				})
			},
			protocols() {
				this.isDialogShow = true
			},
			//签名成功/
			success(file) {
				this.isShowSign = false;
				this.dataValue.signImg = file.accessUrl;
				this.dataValue.autograph = file.fileId;
			},
			// 关闭
			signClose() {
				this.isShowSign = false;
			},
			delSignImg() {
				deleteFile({ fileId: this.dataValue.autograph }).then(res => {
					this.dataValue.signImg = '';
					this.dataValue.autograph = '';
				})
			},
			submit() {
				formValidation({
					data: this.dataValue,
					rules: this.rules
				}).then(res=>{
					// if (this.upLoad.imgThemeFiles.length) {
					// 	this.dataValue.imgTheme = '';
					// 	this.dataValue.imgTheme = this.upLoad.imgThemeFiles[0].id
					// } else {
					// 	return this.$toast.fail('请上传主题图片')
					// }
					if (this.upLoad.addCureProcessFiles.length) {
						this.dataValue.addCureProcessFiles = [];
						this.upLoad.addCureProcessFiles.map(item => {
							this.dataValue.addCureProcessFiles.push(item.id)
						})
					} else {
						return this.$toast.fail('请上传治疗手段及方法附件');
					}
					if (this.dataValue.diseaseDesc) {
						if (this.upLoad.addDiseaseDescFiles.length) {
							this.dataValue.addDiseaseDescFiles = [];
							this.upLoad.addDiseaseDescFiles.map(item => {
								this.dataValue.addDiseaseDescFiles.push(item.id)
							})
						} else {
							return this.$toast.fail('请上传康复前后身体情况描述附件');
						}
					}
					if (this.upLoad.addMedicalHistoryFiles) {
						this.dataValue.addMedicalHistoryFiles = [];
						this.upLoad.addMedicalHistoryFiles.map(item => {
							this.dataValue.addMedicalHistoryFiles.push(item.id)
						})
					}
					if (!this.dataValue.autograph) {
						return this.$toast.fail('请填写本人签名');
					}
					if (!this.checked) {
						return this.$toast.fail('请确认康复案例分享知情同意书');
					}
					this.$showModal({
						title: '提示',
						content: '是否提交您的康复案例？',
						showCancel: true,
					}, (suc)=> {
						rehabilitationAdd(this.dataValue).then(res => {
							if (res.status == 1) {
								uni.showToast({
									title: '新增成功',
									duration: 2000,
									icon: 'success'
								})
								upLoad = {
									addCureProcessFiles: [], //治疗手段及方法
									addDiseaseDescFiles: [], //治疗前
									addMedicalHistoryFiles: [] //以往病史
								}
								this.$nextTick(() => {
									setTimeout(() => {
										uni.navigateBack()
									},1000)
								})
							} else {
								this.$toast.fail(res.message)
							}
						})
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.publishedCase {
		position: relative;
		.signatureBox {
			margin-top: 40rpx;
			margin-left: 2%;
			.signature {
				display: flex;
				flex-direction: column;
				padding-bottom: 10%;
				font-size: 28rpx;
				/deep/ .van-cell__value {
					text-align: left;
				}
				.signImgs {
					position: relative;
					.images {
						width: 200rpx;
						height: 200rpx;
						border: 1px solid #ccc;
					}
					.closeSignimg {
						position: absolute;
						left: 188rpx;
						top: -10rpx;
						font-size: 16px;
					}
				}
				.choose {
					position: relative;
					&::before {
						content: "";
						position: absolute;
						left: 50%;
						top: 20%;
						width: 10rpx;
						height: 60%;
						margin-left: -4rpx;
						background-color:#ccc;
					}
					&::after {
						content: "";
						position: absolute;
						left: 20%;
						top: 50%;
						width: 60%;
						height: 10rpx;
						margin-top: -4rpx;
						background-color:#ccc;
					}
				}
				.handwriting {
					flex: 2;
				}
			}
		}
		.signCheckbox {
			padding: 0 40rpx;
			font-size: 28rpx;
			/deep/ .van-checkbox__icon {
				font-size: 30rpx !important;
			}
		}
		.btnBox {
			margin-top: 10rpx;
			font-size: 24rpx;
			padding: 10rpx 32rpx;
			box-sizing: border-box;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #FFFFFF;
			z-index: 999999;
		
			.btn {
				user-select: none;
				margin-top: 10rpx;
				width: 100%;
				height: 80rpx;
		
				/deep/ .van-button {
					width: 100%;
					height: 100%;
					background-color: #02BF88;
					color: #FFFFFF;
				}
			}
		}
	}
 /deep/ .van-cell__label {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}
.upLoad /deep/ .van-field__input {
	display: none;
}
/deep/ .van-field__button {
	padding-left: 0;
}
.textarea {
	/deep/ .van-cell__value {
		margin-top: 20rpx;
		background-color: #F7F8FA;
		border-radius: 16rpx;
		padding: 16rpx;
	}
}
.upLoadOn {
	text-align: left;
	.upLoadTitle {
		color: #666666;
		font-size: 28rpx;
	}
	/deep/ .van-uploader {
		padding-top: 20rpx;
	}
	/deep/ .van-button--normal {
		padding: 90rpx 80rpx;
	}
}
</style>
